<template>
  <div
    class="goods-list-wrap"
    v-model="loading"
    :finished="finished"
    finished-text="没有更多了"
    @load="loadHeadler"
    is="van-list"
  >
    <ul class="goods-list-show">
      <li
        v-for="goodList in goodLists"
        :key="goodList.id"
        tag="li"
        is="router-link"
        :to="{ name: 'Details', params: { id: goodList.id } }"
      >
        <div class="good-img">
          <img :src="goodList.image" />
        </div>
        <div class="goods-list-info">
          <p class="goods-title">{{ goodList.title }}</p>
          <div class="goods-info">
            <span class="goods-price">￥{{ goodList.price }}</span>
            <span class="goods-sale">{{ goodList.saleNum }}人已买</span>
            <!-- <span class="goods-coupon">{{ goodsList.couponValue }}</span> -->
            <van-icon
              name="shopping-cart-o"
              @click.prevent="
                addToCartHandler({
                  id: goodList.id,
                  title: goodList.title,
                  price: goodList.price,
                  image: goodList.image
                })
              "
            />
          </div>
        </div>
      </li>
    </ul>
    <!-- 回到顶部 -->
    <ToTop />
  </div>
</template>

<script>
import ToTop from "../components/ToTop";
import Vue from "vue";
import { List, Icon } from "vant";

Vue.use(List);
Vue.use(Icon);
export default {
  name: "GoodsList",
  data() {
    return {
      goodLists: [],
      page: 1,
      loading: false,
      finished: false
    };
  },
  components: {
    ToTop
  },
  methods: {
    loadHeadler() {
      this.$http
        .getGoodList(this.$route.params.url, this.page)
        .then(resp => {
          // console.log(resp);
          if (resp.list) {
            this.goodLists = [...this.goodLists, ...resp.list];
          } else {
            this.goodLists = [...this.goodLists, ...resp.items.list];
          }
          if (this.goodLists.length === 0) {
            this.$router.back();
          }
        })
        .then(() => {
          this.page += 1;
          this.loading = false;
        });
    },
    addToCartHandler(curentGoods) {
      // console.log('加入购物车！')
      const addGoods = {
        ...curentGoods,
        amount: 1
      };
      this.$store.commit("AddToCart", addGoods);
    }
  }
};
</script>

<style lang="scss" scoped>
.goods-list-wrap {
  height: 100%;
  overflow: auto;

  .goods-list-show {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    background: #f2f2f2;

    li {
      width: 49%;
      background: #fff;
      box-shadow: 0 1px 1px -1px rgba(0, 0, 0, 0.5);
      margin-top: 10px;

      .goods-img {
        overflow: hidden;
        position: relative;
        padding-top: 100%;
        width: 100%;
        display: block;
        img {
          position: absolute;
          top: 50%;
          left: 50%;
          height: 100%;
          display: block;
          transform: translate(-50%, -50%);
        }
      }
      .goods-list-info {
        padding: 0 5px;
      }

      .goods-title {
        overflow: hidden;
        font-size: 12px;
        line-height: 24px;
        text-overflow: ellipsis;
        color: #877a73;
        white-space: nowrap;
      }

      .goods-price {
        color: #fa585a;
        font-weight: 400;
        font-size: 16px;
        line-height: 32px;
      }

      .goods-sale {
        font-size: 12px;
        color: #877a73;
        letter-spacing: 0;
        margin: 10px;
      }

      .goods-coupon {
        display: inline-block;
        margin-left: 10px;
        font-size: 12px;
        text-align: center;
        color: #fa585a;
        border-radius: 5px;
        box-shadow: inset 0 0 0 1px #fa585a;

        .van-icon,
        .van-icon-shopping-cart-o {
          left: 10px;
        }
      }
    }
  }
}
</style>
